<template>
    <div>
        <head></head>
        <el-table
            :data="addressList"
            border
            style="width: 80%">
        <el-table-column
                prop="addressDetail"
                label="收货人地址"
                width="160">
        </el-table-column>
        <el-table-column
                prop="addressConsignee"
                label="收货人"
                width="100">
        </el-table-column>
        <el-table-column
                prop="addressPhone"
                label="收货电话"
                width="180">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="160">
            <template slot-scope="scope">
                <el-button @click="deleteAddress(scope.row.addressId)" type="danger" size="small">删除</el-button>
                <el-button @click="seeAddress(scope.row.addressId)" type="primary" size="small">查看</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-button @click="addAddress()" type="primary" size="small">添加</el-button>
        <showAddress></showAddress>
    </div>
</template>

<script>
    import showAddress from "./showAddress";
    import {delAddress} from "../../service/address";
    import {mapActions, mapMutations, mapState} from "vuex";
    import Head from "../cart/head";

    export default {
        // eslint-disable-next-line vue/no-unused-components
        components: {Head, showAddress},
        computed: {
            ...mapState("address", ["addressList","dialogFormVisible"]),
            ...mapState("cart",["user"])
        },
        methods: {
            deleteAddress(addressId) {
                this.$confirm('是否删除该收货地址, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    await delAddress(addressId);
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                    this.show();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            seeAddress(addressId) {
                this.setDialogFormVisible(true);
                this.findById(addressId);
            },
            addAddress(){
                this.$router.push("/address/addAddress");
            },
            ...mapMutations("address", ["setDialogFormVisible"]),
            ...mapActions("address", ["show", "findById"]),
            ...mapActions("cart",["setUser"])
        },
        async created() {
            await this.setUser();
            this.show(this.user.userId);
        },
    }
</script>

<style scoped>

</style>